import React ,{ Component }from "react";
import { Form, Icon, Input, Button, Checkbox } from 'antd';

import { connectAlita } from 'redux-alita';

const FormItem = Form.Item;
 //dom 第一次渲染完成，发送ajax，返回数据setState后组件会重新渲染
class Login extends Component{
    componentDidMount(){  
        const { setAlitaState } = this.props;
        console.log(this.props)
        setAlitaState({stateName:'auth',data:null})
    }
    /*组件更新完毕，react只会在第一次初始化成功会进入componentDidmount,
    *之后每次重新渲染后都会进入这个生命周期
    *这里可以拿到prevProps和prevState，即更新前的props和state。
    */
    componentDidUpdate(prevProps){

    }
    handleSubmit = (e) => {
        e.preventDefault()
    }
    render(){
        const { getFieldDecorator } = this.props.form;
        return(
            <div className="login">
                <div className="login-form">
                    <div className="login-logo">
                        <span>登录</span>
                    </div> 
                    <Form>
                        <FormItem>
                        {getFieldDecorator('username', {
                            rules: [{ required: true, message: '请输入用户名' }],
                        })(
                            <Input
                            prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                            placeholder="管理员输入admin, 游客输入guest"
                            />,
                        )}
                        </FormItem>
                        <FormItem>
                            {getFieldDecorator('password', {
                                rules: [{ required: true, message: '请输入密码' }],
                            })(
                                <Input
                                prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                type="password"
                                placeholder="请输入密码"
                                />,
                            )}
                        </FormItem>
                        <FormItem>
                            {getFieldDecorator('remember', {
                                valuePropName: 'checked',
                                initialValue: true,
                            })(<Checkbox>记住我</Checkbox>)}
                            <a className="login-form-forgot" href="">
                                忘记密码
                            </a>
                            <Button type="primary" htmlType="submit" className="login-form-button">
                                登录
                            </Button>
                            <a href="">注册</a>
                        </FormItem>
                    </Form>   
                </div>
            </div>
        )
    }
}

export default connectAlita(['auth'])(Form.create()(Login));